<!DOCTYPE html>
<html ng-app="myapp">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>登录</title>
	<link rel="stylesheet" href="css/init.css">
	<link rel="stylesheet" type="text/css" href="css/iconfont.css">
	<style type="text/css" media="screen">
		h1{
			font-size: 24px;
			font-weight: bold;
			margin-bottom: 30px;
		}
		.content{
			width: 400px;
			height: 300px;
			border: 1px solid black;
			margin: 100px auto;
			text-align: center;
			padding-top: 50px;
			box-sizing: border-box;
		}
		.usernameInput{
			margin-bottom: 20px;
		}
		.pwdInput{
			margin-bottom: 20px;
		}
	</style>
</head>
<body ng-controller="login">
	<div class="content">
		<h1>欢迎登录</h1>
		<form name='myform' ng-module="myform">
			<div class="usernameInput">
				<label class="iconfont icon-yonghuming">用户名：</label>
				<input type="text" name="username" ng-model="username" placeholder="请输入用户名（手机号）" required ng-pattern="/^1[3,4,5,7,8]\d{9}$/">
				<br>
				<span style="color: red;" ng-show='myform.username.$dirty && myform.username.$error.required'>请输入手机号</span>
	            <span style="color: red;" ng-show='myform.username.$dirty && myform.username.$error.pattern'>请输入合法手机号</span>
	        </div>
	        <div class="pwdInput">
				<label class="iconfont icon-mima">密&nbsp;&nbsp;&nbsp;码：</label>
	            <input type="text" ng-model='password' name='password' minlength="6" required>
	            <br>
	            <span style="color:red;" ng-show='myform.password.$dirty && myform.password.$error.required' placeholder="请输入密码">密码不能为空</span>
	            <span style="color:red;" ng-show='myform.password.$dirty && myform.password.$error.minlength'>请输入6位以上长度的密码</span>
			</div>
			<button type="button" ng-disabled='myform.$invalid' ng-click='login()'>登录</button>
		</form>
	</div>
	<script src="bower_components/angular/angular.min.js"></script>
	<script>
    var app = angular.module('myapp', []);
    app.controller('login', ['$scope', '$http', function($scope, $http) {
        $scope.login = function() {
            var promise = $http({
                url: './json/user.json',
                type: 'get'
            });
            promise.then(function(res) {
               
                var data = res.data;
                console.log(data);
				for(var i = 0; i < data.length; i++){
					console.log(data[i].username);
					console.log($scope.username);
					if(data[i].username == $scope.username){
						if(data[i].password == $scope.password){
							location.href = "./index.html";
						}else{
							alert("用户名或密码错误");
						}
					}
				}
            }),
            function() {
                alert('connect error!');
                //document.referrer==""; //判断是否是url进入
            }
        }
    }])
    </script>
</body>
</html>